<template>
	<div class="experience">
		<div class="header">
			<span>{{title}}</span>
		</div>
		<van-tabs>
			<van-tab v-for="index in list" :title="index.name" :key="index.id">
				<van-card :title="ke.title" :thumb="ke.coverimages" v-for="ke in index.child" :key="ke.id" @click="todetail(ke)" />
			</van-tab>
		</van-tabs>
		<p class="lookmore">
			<span>查看更多</span>
		</p>
	</div>

</template>

<script>
	import online from "@/assets/img/online.png"
	import news from "@/assets/img/news_img.png"
	export default {
		name: "experience",
		components: {

		},
		data() {
			return {
				active: 0,
				news: news,
				titles: "乾隆告诉儿子千万不要杀和珅， 但嘉庆不听， 15 年后才明白其中道理...",
				list:[],
				title:''
			}
		},
		methods:{
			todetail(item){
				this.$router.push({name:'articledetail',query:{id:item.id}})
			},
			getList(item){
				this.title = item.name
				this.$api.home.nav({type:1,pid:item.id}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.list = res.data
						this.getArticle()
					}
				
				})
			},
			getArticle(){
				let that = this
				this.list.forEach(item=>{
					that.$api.home.articleList({category_id:item.url,limit:10,page:1}).then(res => {
						// 执行某些操作
						if (res.code == 1) {
							that.$set(item,"child",res.data.data)
						}
					
					})
				})
				
			}
				
		}


	}
</script>

<style scoped lang="less">
	.experience {
		width: 95%;
		// height:8.56rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rem 0rem 0rem 0rem rgba(206, 206, 206, 0.29);
		border-radius: 0.2rem;
		margin: 0.5rem auto;
		padding: 0.88rem 0.78rem;

		.header {
			span {
				width: 5.56rem;
				height: 2rem;
				background: rgba(254, 119, 0, 1);
				font-size: 0.81rem;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.lookmore {
			margin: 1rem auto;
			span {
				width: 4.88rem;
				height: 1.63rem;
				border: 1px solid rgba(160, 160, 160, 1);
				border-radius: 0.2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 0.81rem;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(103, 103, 103, 1);
				margin: 0 auto;
			}

		}

	}
</style>
<style>
	.experience .van-tabs__wrap {
		margin: 1rem 0;
	}
	.experience .van-tabs__line {
		background: #FE7700;
		height: 0.06rem;
	}

	.experience .van-tabs__nav--line {
		padding-bottom: 0.41rem;
	}

	.experience .van-tab--active {
		position: relative;
		color: #FE7700;
	}

	.experience .van-tab--active:after {
		position: absolute;
		bottom: -0.45rem;
		left: 48%;
		content: url(../../assets/img/jian.png);
	}

	.experience .van-card {
		background: #fff;
		padding: 0 1rem;
	}

	.experience .van-card__thumb {
		width: 7.63rem;
		height: 4.31rem;
	}

	.experience .van-card__content {
		min-height: 4.31rem;

	}
	.experience .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
		display: none;
	}
</style>
